//Display Screen with an centered image and a close button

function DisplayScreen(startx, starty, width, height, backGroundColor, borderColor, context, alpha, titleImage, buttonImage, canvas) {
	this._listeners ={};
	this.x = startx;
	this.y = starty;
	this.height = height;
	this.width  = width;
	this.backGroundColor = backGroundColor;
    this.borderColor = borderColor;
	this.context = context;
	this.canvas = canvas;
	this.alpha = alpha;
	this.titleImageName = titleImage;
	this.buttonImageName = buttonImage;
	this.titleImage = null;
	this.buttonImage = null;
	this.loadCount = 0
	this.EVENT_CLOSE = "close_display_screen";
	this.padding = 2
	_this = this;
	this.titleImage = new Image();
	this.buttonImage = new Image();
	this.titleImage.onload = this.imageLoaded;
	this.buttonImage.onload = this.imageLoaded;
	this.titleImage.src = this.titleImageName;
	this.buttonImage.src = this.buttonImageName;
	this.titleX = 0;
	this.titleY = 0;
	this.buttonX = 0;
	this.buttonY = 0;
	
	
	
	this.imageLoaded = function() {
		alert("image loaded");
		this.loaded = true;
	}
	
		
	this.onMouseUp = function(mouseX,mouseY) {
		Debugger.log("mouse clicked on dsplay screen");
		var to = this.buttonImage;
		Debugger.log("mouseX:" + mouseX);
		Debugger.log("mouseY:" + mouseX);
		Debugger.log("this.buttonX:" + this.buttonX);
		Debugger.log("this.buttonY:" + this.buttonY);
		Debugger.log("to.width:" + to.width);	
		Debugger.log("to.height:" + to.height);	
		if ( (mouseY >=this.buttonY) && (mouseY <= this.buttonY+to.height) && (mouseX >= this.buttonX) && (mouseX <= this.buttonX+to.width) ) {
			Debugger.log("mouse clicked on dsplay screen on close button");
			this.dispatch(this.EVENT_CLOSE);
		}
	
	}
	
	this.draw = function() {
		
		this.titleX = this.canvas.width/2 - this.titleImage.width/2;
		this.titleY = this.canvas.height/2 - this.titleImage.height/2;
		this.buttonX = this.canvas.width/2 - this.buttonImage.width/2;
		this.buttonY = this.canvas.height - this.buttonImage.height - 20;
		
		//background
		this.context.globalAlpha = this.alpha;		
		this.context.textBaseline = "top";
	 	this.context.fillStyle = this.backGroundColor;
		this.context.fillRect(this.x, this.y, this.width, this.height);
				
		//box
		this.context.strokeStyle =  this.borderColor; 
		this.context.strokeRect(this.x+ this.padding,  this.y+ this.padding, this.width-( this.padding*2), this.height-( this.padding*2));
		this.context.globalAlpha = 1;		
		//Titledisplay
		
		this.context.drawImage(this.titleImage,this.titleX,this.titleY);
		this.context.drawImage(this.buttonImage,this.buttonX,this.buttonY);
	}
}
DisplayScreen.prototype = new EventDispatcher();
DisplayScreen.prototype.constructor = DisplayScreen;